import './App.css';
import React from 'react';
import { Tabs, Badge, Card, WingBlank } from 'antd-mobile';
import LoginForm from './LoginForm';
import RegForm from './RegForm';
import { connect } from 'react-redux';
import bg1 from './static/bg1.svg';

const tabs = [
    { title: '登录' },
    { title: <Badge dot>注册</Badge> },
];
class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            dataSource: [],
            loading: false,
        }
    }
    componentDidMount() {
        var currentUser = this.props.currentUser;
        var token = localStorage.getItem("accessToken")
        var memberId = localStorage.getItem("memberId")
        if (token && memberId) {
            this.props.history.push('/ChildDtl');
        }
    }
    doSetUser = (user) => {
        this.props.dispatch({
            type: "setCurrUser",
            data: user,
        })
    }
    render() {
        return (
            <div>
                <img src={bg1} style={{ zIndex: 'revert', position: 'absolute', top: '1%' }} />
                <WingBlank size="lg" style={{ marginTop: '60%' }} className="loginBg">
                    <Tabs tabs={tabs} initialPage={0} className="loginBg">
                        <div className="loginBg">
                            <LoginForm history={this.props.history} setUser={this.doSetUser} />
                        </div>
                        <div className="loginBg">
                            <RegForm history={this.props.history} />
                        </div>
                    </Tabs>
                </WingBlank>
            </div>
        )
    };
}

export default connect(
    state => ({ currentUser: state.setCurrentUser })
)(App)
